<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="cate_table_header">
                <el-button @click="addCategories" type="primary">添加分类</el-button>
            </div>
            <div class="cate_table_main">
                <tree-table :columns="cast_column" :data="cate_list" :expand-type="false" :selection-type="false"
                            :show-row-hover="true" border
                            class="tree-table" show-index v-loading="cate_tableLoad">
                    <template slot="cat_deleted" slot-scope="scope">
                        <i class="el-icon-success" style="color: lightgreen" v-if="scope.row.cat_deleted==false"></i>
                        <i class="el-icon-error" style="color: red" v-else></i>
                    </template>
                    <template slot="cat_level" slot-scope="scope">
                        <el-tag size="mini" v-if="scope.row.cat_level==0">一级</el-tag>
                        <el-tag size="mini" type="success" v-else-if="scope.row.cat_level==1">二级</el-tag>
                        <el-tag size="mini" type="warning" v-else>三级</el-tag>
                    </template>
                    <template slot="cat_set" slot-scope="scope">
                        <el-button @click="showEditMessage(scope.row)" icon="el-icon-edit" size="mini"
                                   type="primary"></el-button>
                        <el-button @click="showDeleteMessage(scope.row)" icon="el-icon-delete" size="mini"
                                   type="danger"></el-button>

                    </template>
                </tree-table>
                <el-pagination
                        :current-page="cate_queryInfo.pagenum"
                        :page-size="cate_queryInfo.pagesize"
                        :page-sizes="[1, 5, 10, 50]"
                        :total="cate_total"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                        layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </el-card>

        <el-dialog :visible.sync="cate_dialog" title="提示" width="50%" :before-close="cateDialogClose">
            <el-form :model="addCateform" :rules="addCateformRules" ref="addCateformRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCateform.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级" prop="parentname">
                    <el-cascader style="width: 100%" :props="{children: 'children',label: 'cat_name',value: 'cat_id',checkStrictly: true}"
                            v-model="addCateform.parentname"  @change="getCurrentParent"
                            :options="addCateform.parentlist" ></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cate_dialog = false">取 消</el-button>
                    <el-button @click="setCategories" type="primary">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        created() {
            this.getCateList();
        },
        data() {
            return {
                cate_queryInfo: {
                    type: 3,
                    pagenum: 1,
                    pagesize: 5
                },
                set_form: {
                   cat_name:'',
                   cat_id:0
                },
                cate_list: [],
                cast_column: [       //定义表格的列
                    {
                        label: '分类名称',
                        prop: 'cat_name',
                        headerAlign: 'center',
                    },
                    {
                        label: '是否有效',
                        prop: 'cat_deleted',
                        headerAlign: 'center',
                        align: 'center',
                        type: 'template',
                        template: 'cat_deleted'
                    },
                    {
                        label: '排序',
                        prop: 'cat_level',
                        headerAlign: 'center',
                        align: 'center',
                        type: 'template',
                        template: 'cat_level'
                    },
                    {
                        label: '操作',
                        prop: '',
                        headerAlign: 'center',
                        align: 'center',
                        type: 'template',
                        template: 'cat_set'
                    },
                ],
                cate_total: 0,
                cate_tableLoad: false,
                cate_dialog: false,
                is_set: false,
                addCateform: {
                    cat_pid: 0,
                    cat_level:0,
                    cat_name: '',
                    parentname:[],
                    parentlist: []
                },
                addCateformRules:{
                    cat_name:[
                        { required: true, message: '请输入分类名称', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            async getCateList() {
                this.cate_tableLoad = true;
                const {data: result} = await this.$http.get('categories', {
                    params: this.cate_queryInfo
                });
                this.cate_total = result.data.total;
                this.cate_list = result.data.result;
                this.cate_tableLoad = false;
                console.log(result);
            },
            showEditMessage(val) {
                this.set_form = val;
                this.addCateform.cat_name=val.cat_name;
                this.is_set=true;
                this.addCategories();
            },
            async showDeleteMessage(val) {
                const {data: res } = await this.$http.delete('categories/'+val.cat_id)
                if(res.meta.status == 200){
                    this.$message.success('删除成功')
                    this.getCateList();
                }else{
                    return this.$message.error('删除失败')
                }
            },
            handleSizeChange(val) {
                this.cate_queryInfo.pagesize = val;
                this.getCateList();
            },
            handleCurrentChange(val) {
                this.cate_queryInfo.pagenum = val;
                this.getCateList();
            },
            addCategories() {
                this.getParentCateList();
                this.cate_dialog = true;
            },
            async getParentCateList() {
                    const {data: res } = await this.$http.get('categories',{
                        params:{  type: 2  }
                    })
                    if(res.meta.status !== 200){
                        return this.$message.error('获取父级分类失败')
                    }else{
                        this.addCateform.parentlist = res.data;
                    }
            },
             setCategories() {
                this.$refs['addCateformRef'].validate(async (valid) => {
                    if (valid) {
                        if(this.is_set){
                            const {data: res } = await this.$http.put('categories/'+this.set_form.cat_id,{
                                 cat_name: this.addCateform.cat_name
                            })
                            if(res.meta.status == 200){
                                this.$message.success('修改成功')
                                this.getCateList();
                                this.is_set=false;
                            }else{
                                return this.$message.error('修改失败')
                            }
                        }else{
                            const {data: res} = await this.$http.post('categories', this.addCateform)
                            if(res.meta.status == 201){
                                this.$message.success('创建成功')
                                this.getCateList();
                            }else{
                                return this.$message.error('创建失败')
                            }
                        }

                        this.cate_dialog=false;
                    } else {
                        return false;
                    }
                })
            },
            getCurrentParent(val){
                if(val.length==1){
                    this.addCateform.cat_level=1;
                    this.addCateform.cat_pid=val[0];
                }else if(val.length==2){
                    this.addCateform.cat_level=2;
                    this.addCateform.cat_pid=val[1];
                }
            },
            cateDialogClose(done){
                this.addCateform.cat_level=0;
                this.addCateform.cat_pid=0;
                this.addCateform.cat_name='';
                this.addCateform.parentname=[];
                done();
            }
        }
    }
</script>
<style lang="less" scoped>
    .cate_table_header {
        display: flex;
    }

    .tree-table {
        margin-top: 15px;
    }
</style>